<template>
	<view class="wrap">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="address-item" v-for="record in recordList" :key="record.id"
				@click="apply(record.id)" @longpress="openActionSheet(record.id)"
			>
				<view class="contacts">
					<view v-if="record.isDefault == 'Y'" class="default-tag">默认</view>
					<text class="username">{{ record.username }}</text>
					<text class="tel">{{ record.phone }}</text>
					
				</view>
				<view class="address">
					{{ record.area }} {{ record.address }}
				</view>	
			</view>
		</mescroll-body>
		
		<view class="add-box">
			<button type="default" class="btn" @click="add()">
				<u-icon name="plus" color="#fff" size="14px"></u-icon>
				<text style="margin:0 5px;">新增收货地址</text>
			</button>
		</view>
			
		<u-action-sheet :actions="actionList" :show="showActionSheet" round="10px" cancelText="取消" 
			:safeAreaInsetBottom="true" :closeOnClickAction="true" :closeOnClickOverlay="true" 
			@select="selectActionItem" @close="closeActionSheet"
		></u-action-sheet>	
	</view>	
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";	
import { addressList, addressSetDefault, addressDel } from "@/api/uc/address.js";
	
export default {
	mixins: [MescrollMixin],
	onLoad(options) {
		if(options.from != undefined) {
			this.from = options.from;
		}
	},
	onShow() {
		this.mescroll.resetUpScroll();
	},
	data() {
		return {
			from: 'ucIndex',
			queryParams: {},
			recordList: [],
			showActionSheet: false,
			actionList: [
				{
					id: 0,
					action: 'setDefault',
					name:'设为默认',
				},
				{
					id: 0,
					action: 'update',
					name:'修改',
				},
				{
					id: 0,
					action: 'del',
					name:'删除',
					color:'#d7142b'
				}
			]
		}
	},
	methods: {
		upCallback(page) {
			console.log("上拉加载");
			this.queryParams.pageSize = page.size;
			this.queryParams.page = page.num;
			this.queryParams.filter = this.currentFilterIdent;
			addressList(this.queryParams).then(res=>{
				// 第一页手动置空列表
				if(page.num == 1) {
					this.recordList = [];	
				}
				
				this.recordList = this.recordList.concat(res.data.recordList); 
				this.mescroll.endBySize(res.data.recordList.length, res.data.totalRow);
			});
		},
		add() {
			uni.navigateTo({
				url: '/pages/uc/addressEdit'
			})
		},
		apply(id) {
			if(this.from == 'settle') {
				let pages = getCurrentPages();	// 获取当前面页栈实例
				let prevPage = pages[pages.length - 2]; // 上一页面
				prevPage.$vm.selectedAddress(id);	// 给上一页的selectedAddress方法传值
				uni.navigateBack();
			}
		},
		openActionSheet(id) {
			this.actionList.map(item=>{
				item.id = id;
				return item;
			});	
			this.showActionSheet = true;
		},
		closeActionSheet() {
			this.showActionSheet = false;
		},
		selectActionItem(item) {
			if(item.action == 'setDefault') {
				addressSetDefault(item.id).then(res=>{
					this.toast('设置默认成功');
					this.mescroll.resetUpScroll();
				});
			} else if(item.action == 'update') {
				uni.navigateTo({
					url: '/pages/uc/addressEdit?id=' + item.id
				});
			} else {
				addressDel(item.id).then(res=>{
					this.toast('删除成功');
					this.mescroll.resetUpScroll();
				});
			}
		}
	}
}	
</script>

<style lang="less" scoped>
.wrap {
	display: flex;
	flex-direction: column;
	background: #f4f4f4;
	height: 100vh;
}	

.address-item {
	display: flex;
	flex-direction: column;
	margin: 12rpx 24rpx;
	padding: 24rpx;
	background: #fff;
	border-radius: 5px;
	
	.contacts {
		display: flex;
		flex-direction: row;
		align-items: center;
		
		.username, .tel {
			margin-right: 5px;
			font-size: 14px;
			color: #111;
		}
		
		.default-tag {
			display: flex;
			align-items: center;
			margin-right: 5px;
			background: #f2c049;
			padding: 0 5px;
			border-radius: 2px;
			font-size: 12px;
			color: #333;
		}
	}
	
	.address {
		margin-top: 5px;
		font-size: 12px;
		color: #999;
	}
}
	
.add-box {
	display: flex;
	padding: 24rpx;
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	background: #fff;
	border-top: 1px solid #eee;
	box-sizing: border-box;
	
	.btn {
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 640rpx;
		height: 36px;
		line-height: 36px;
		color: #fff;
		font-size: 14px;
		background: #d62222;
	}
}	
</style>